<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style>
      #chart-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
    </style>

    <script src="https://lib.baomitu.com/echarts/5.1.2/echarts.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div id="chart-panel" style="margin-top: 30px"></div>
    <a href="http://chartsdev.com">chartsdev.com 数据可视化技术分享</a>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-panel'));
      var uploadedDataURL = '/asset/get/s/data-1625545136350-oWFk_ystL.json';

      var baseTexture = null;
      var option = null;
      var geoJson = null;
      // 请求world.json文件
      function getGeoJsonData() {
        $.getJSON(uploadedDataURL, function (jsonObj) {
          geoJson = jsonObj;
          getBaseTexture();
        });
      }

      // 生成球面纹理
      function getBaseTexture() {
        echarts.registerMap('world', geoJson);
        let canvas = document.createElement('canvas');
        baseTexture = echarts.init(canvas, null, {
          width: 4096,
          height: 2048,
        });
        baseTexture.setOption({
          backgroundColor: '#031c48',
          geo: {
            type: 'map',
            map: 'world',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            boundingCoords: [
              [-180, 90],
              [180, -90],
            ],
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#2455ad',
                borderColor: '#000c2d',
              },
              emphasis: {
                areaColor: '#357cf8',
              },
            },
            label: {
              normal: {
                fontSize: 20,
                show: true,
                textStyle: {
                  color: '#fff',
                },
              },
              emphasis: {
                fontSize: 30,
                show: true,
                textStyle: {
                  color: 'yellow',
                },
              },
            },
          },
        });
        drawEarth();
      }

      // 绘制球体
      function drawEarth() {
        option = {
          backgroundColor: '#013954',
          tooltip: {
            trigger: 'item',
          },
          globe: {
            baseTexture: baseTexture, // 基础纹理
            globeRadius: 150, // 球面半径
            environment: '#000',
            shading: 'color',
            light: {
              // 光照阴影
              main: {
                color: '#fff', // 光照颜色
                intensity: 1, // 光照强度
                alpha: 40,
                beta: -30,
              },
              ambient: {
                color: '#fff',
                intensity: 1,
              },
            },
            viewControl: {
              alpha: 30,
              beta: 160,
              autoRotate: true, // 开启自动旋转
              autoRotateAfterStill: 10,
              distance: 240,
            },
          },
          series: [
            {
              name: '世界贸易情况',
              type: 'lines3D',
              coordinateSystem: 'globe',
              effect: {
                show: true,
              },
              blendMode: 'lighter',
              lineStyle: {
                width: 2,
              },
              data: [],
              silent: false,
            },
          ],
        };
        // 随机数据 i控制线数量
        for (let i = 0; i < 100; i++) {
          option.series[0].data = option.series[0].data.concat(rodamData());
        }
        myChart.clear();
        myChart.setOption(option, true);
      }

      function rodamData() {
        let name = '随机数据' + Math.random().toFixed(5) * 100000;
        // 模拟数据，构造飞线的起始经纬度
        let longitude = 116.2;
        let latitude = 39.56;
        let longitude2 = Math.random() * 360 - 180;
        let latitude2 = Math.random() * 180 - 90;
        return {
          coords: [
            [longitude, latitude],
            [longitude2, latitude2],
          ],
          value: (Math.random() * 3000).toFixed(2),
        };
      }

      getGeoJsonData();

      if (option) {
        myChart.setOption(option);
      }
    </script>
  </body>
</html>
